import React from 'react';
import styles from './index.module.scss';
import {Skeleton} from 'antd'
import {DoubleRightOutlined, QuestionCircleOutlined} from "@ant-design/icons";
import Panel_Home from '../../chartPanels/Panel_Home';
import Panel_Chart from '../../chartPanels/Panel_Chart';

import {EE} from "@/utils";
import dvTool from "@/pages/dv/dvTool";
import EnumOnFire from "@/pages/dv/constants/EnumOnFire";


interface IProps {
  uuid: string;
  adapterMode: string;
  option: DV.IOption;
  dvLoading: boolean;
}

interface IState {
  selectedChartKey: string;
  chartOption?: DV.IChart | {}
}

/**
 * chart组件编辑盒子
 * @param uuid
 * @param adapterMode
 * @param option
 * @param props
 * @constructor
 */

class ChartPanelBox extends React.PureComponent<IProps, IState> {
  constructor(props: IProps) {
    super(props);
    this.state = {
      selectedChartKey: dvTool.selectedChartKey
    };
  }

  componentDidMount(): void {
    EE.on(EnumOnFire.selectedChartKey, (selectedChartKey: string) => {
      this.setState({
        selectedChartKey
      })
    })
  }


  render(): React.ReactNode {
    const {selectedChartKey} = this.state;
    return <div className={styles.panelBox}>
      {
        this.props.dvLoading
          ? <Skeleton active/>
          : <ChartPanel
            selectedChartKey={selectedChartKey}
          />
      }
    </div>
  }
}

export default ChartPanelBox;

function ChartPanel({ selectedChartKey}: {
  selectedChartKey: string
}) {

  return <React.Fragment>
    <div className={styles.header}>
      <DoubleRightOutlined style={{fontSize: 24}}/>
      <div className={styles.title}>
        <div>控制面板</div>
        {
          !!selectedChartKey
            ? <a href={'https://cloud.baidu.com/doc/SUGAR/s/Kk6z5wun2'}
                 target={'_blank'}>
              <QuestionCircleOutlined/>图表组件配置
            </a>
            : <a href={'https://cloud.baidu.com/doc/SUGAR/s/Kk6z5wun2'}
                 target={'_blank'}>
              <QuestionCircleOutlined/>大屏页面整体配置
            </a>
        }

      </div>
    </div>
    <div className={styles.content}>
      {
        !!selectedChartKey
          ? <Panel_Chart
            key={selectedChartKey}
            chartOption={dvTool.getChartConfig(selectedChartKey)}
          /> // 传递key值使内部自动重新挂载
          : <Panel_Home key={'Panel_Home'}/>
      }
    </div>
  </React.Fragment>
}


